<template>
	<div class="system-add-role-container">
		<el-dialog title="比对结果报送信息" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="small" label-width="120px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="请输入院校代码">
							<el-input v-model="ruleForm.yxdm" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-button type="primary" plain @click="frontDownload">下载模板</el-button>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上传学籍信息">
							<el-upload class="upload-demo"
									   drag
									   action="#"
									   :on-remove="handleRemove"
									   :before-remove="beforeRemove"
									   :on-success="handleSuccess"
									   :before-upload="beforeUpload"
									   multiple>
								<el-icon class="el-icon--upload">
									<upload-filled />
								</el-icon>
								<div class="el-upload__text">
									点击或将文件拖拽到这里上传
									<em>支持扩展名：.xls .xlsx</em>
								</div>
								<template #tip>
									<div class="el-upload__tip">
									</div>
								</template>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts">
	import { reactive, toRefs } from 'vue';
	import { UploadFilled } from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type { UploadProps, UploadUserFile } from 'element-plus'
	import { resetPic } from  '../../../api/personal/index'
	export default {
		name: 'systemAddRole',
		components: {
			UploadFilled,
		},
		setup() {
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					yxdm: '', // 院校代码
				},
			});
			// 打开弹窗
			const openDialog = () => {
				state.ruleForm = {}
				state.isShowDialog = true;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 新增
			const onSubmit = () => {
				closeDialog();
			};
			const frontDownload = ()=>{
				const a = document.createElement("a"); //创建一个<a></a>标签
				a.href = "./static/temple.xls";
				//给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
				a.download ="模板.xlsx";
				//设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
				a.style.display = "none"; // 障眼法藏起来a标签
				document.body.appendChild(a);
				// 将a标签追加到文档对象中
				a.click(); //模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
				a.remove();
				// 一次性的，用完就删除a标签
			}
			//上传
			const handleRemove: UploadProps['onRemove'] = (file:any, uploadFiles:any) => {
				console.log(file, uploadFiles)
			}
			const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
				return ElMessageBox.confirm(
						`Cancel the transfert of ${uploadFile.name} ?`
				).then(
						() => true,
						() => false
				)
			}
			const beforeUpload =  (file:any) => {
				console.log(file);
				const fd= new FormData()
				fd.append('file', file)
				const yxdmVal = state.ruleForm.yxdm
				fd.append('yxdm', yxdmVal)
				debugger
				resetPic(fd).then(res => {
					if(res.code  === 200){
						console.log(res);
						state.isShowDialog = false;
						ElMessage.success('比对成功');
					}else{
					}
				})
			}
			return {
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				frontDownload,
				handleRemove,
				beforeUpload,
				beforeRemove,
				...toRefs(state),
			};
		},
	};
</script>

<style scoped lang="scss">
	.system-add-role-container {
		.menu-data-tree {
			border: var(--el-input-border, var(--el-border-base));
			border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
			padding: 5px;
		}
	}
</style>
